
<template>
  <div>
    <ul class="tree">
      <li v-for="(item, index) in treeListData" :key="index" :class="[item.isOpen ? 'open' : 'close', item.childrenList && item.childrenList.length ? '' : 'no-childrenList']"><span @click="treeItem(item)">{{item.name}}</span>
        <Ptree v-show="item.isOpen" :treeListData="item['childrenList']"></Ptree>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'Ptree',
  props: [ 'treeListData' ],
  methods: {
    treeItem (item) {
      item.isOpen = !item.isOpen
    }
  }
}
</script>
 
<style lang="scss" scoped>
.tree{
  li{line-height:30px;padding-left:30px;position: relative;font-size:14px;
    &::after{display:block;clear: both;content: '';width:6px;height:6px;border-top:1px solid #f00;border-right:1px solid #f00;position:absolute;left:14px;top:12px;}
    &.open::after{transform: rotate(135deg)}
    &.close::after{transform: rotate(45deg)}
    &.no-childrenList::after{display:none}
  }
}
</style>